/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
import { QualityInfoTypeEnum } from '@model/enum/QualityInfoEnum'
/* entity */
import Field from '@model/entity/Field'
/* hooks */
import { QualityInfoValueChangedHandlerType, useQualityInfoPeriod } from '@hooks/useQualityInfo'
/* mixins */
import FormMixin from '@src/component/form/mixin/form'
/* scss */
import '@src/component/form/components/FormQualityInfoField/FormQualityInfoBuild/FormQualityInfoBuild.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, defineComponent, ComputedRef } from 'vue'
import { CommonComponentInstance } from '@model/VC'

export type QualityInfoRecordProps = {
  field: Field | undefined,
  placeholder: string | undefined,
  value: string | QualityInfoTypeEnum | undefined
}

export interface QualityInfoRecordSetupState {
  qualityInfoPeriodField: ComputedRef<Field>
  qualityInfoValueChangedHandler: QualityInfoValueChangedHandlerType
}

export type QualityInfoRecordInstance = ComponentInstance & QualityInfoRecordSetupState
export type QualityInfoRecordVM = ComponentRenderProxy<QualityInfoRecordProps> & CommonComponentInstance

export default defineComponent<QualityInfoRecordProps, QualityInfoRecordSetupState>({
  name: ComponentNameEnum.QualityInfoRecord,
  mixins: [FormMixin],
  props: {
    value: {
      type: String,
      default: QualityInfoTypeEnum.Auto
    }
  },
  setup(props: QualityInfoRecordProps, { emit }) {
    let [qualityInfoPeriodField, qualityInfoValueChangedHandler] = useQualityInfoPeriod(emit)
    
    return {
      qualityInfoPeriodField,
      qualityInfoValueChangedHandler
    }
  },
  render() {
    return (
      <div class={ComponentNameEnum.QualityInfoRecord}>
        <div class="product-quality-timeline" ref="ProductQualityTimeline">
          <base-timeline 
            data="recordPage.list" 
            record-render="renderRecord" 
            loading="recordLoading"
            loadmore="recordPage.hasNextPage"
            load="loadmore"
          />
        </div>
      </div>
    )
  }
})
